import React, { Component } from 'react';
import {
  // G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';
import { Card } from 'antd';
import DataSet from '@antv/data-set';

class ChartLinkage extends Component {
  state = {
    // test: '',
  };

  render() {
    const data = [
      {
        date: '2019-11-21',
        counted: '10',
        emotionPercent: [
          { category: '悲观', value: 10 },
          { category: '疑虑', value: 20 },
          { category: '厌恶', value: 30 },
          { category: '中立', value: 40 },
        ],
      },
      {
        date: '2019-11-22',
        counted: '20',
        emotionPercent: [
          { category: '悲观', value: 0 },
          { category: '疑虑', value: 0 },
          { category: '厌恶', value: 0 },
          { category: '中立', value: 0 },
        ],
      },
      {
        date: '2019-11-23',
        counted: '30',
        emotionPercent: [
          { category: '悲观', value: 10 },
          { category: '疑虑', value: 20 },
          { category: '厌恶', value: 30 },
          { category: '中立', value: 40 },
        ],
      },
    ];

    const ds = new DataSet({
      state: {
        currentState: '2019-11-21',
      },
    });

    const dvData = ds
      .createView('dvData', {
        watchingStates: [],
      })
      .source(data);

    const dvPercent = ds.createView('dvPercent').source(dvData);

    dvPercent
      .transform({
        type: 'filter',
        callback: function(row) {
          console.log(row.date, ds.state.currentState);
          return row.date === ds.state.currentState;
        },
      })
      .transform({
        type: 'map',
        callback: function(row) {
          console.log(row);
          return row.emotionPercent;
        },
      });

    // dvPercent.rows = dvPercent.rows[0];

    // dvPercent.rows = [
    //   { category: '悲观', value: 10 },
    //   { category: '疑虑', value: 20 },
    //   { category: '厌恶', value: 30 },
    //   { category: '中立', value: 40 },
    // ];

    console.log(dvPercent);

    return (
      <div>
        <Card>
          <Chart
            height={300}
            padding={[20, 60, 40, 60]}
            data={dvData}
            scale={{
              counted: {
                type: 'linear',
              },
              date: {
                range: [0, 1],
              },
            }}
            forceFit
            onTooltipChange={e => {
              console.log(e.items[0].name);
              ds.setState('currentState', e.items[0].name);
            }}
          >
            <Axis name="date" />
            <Axis name="counted" />
            <Tooltip
              showTitle={false}
              crosshairs={{
                type: 'y',
              }}
            />
            <Geom
              type="line"
              position="date*counted"
              size={2}
              tooltip={[
                'date*counted',
                (date, counted) => ({
                  name: date,
                  value: counted,
                }),
              ]}
            />
            <Geom
              type="point"
              position="date*counted"
              size={4}
              shape="circle"
              style={{
                stroke: '#fff',
                lineWidth: 1,
              }}
              tooltip={[
                'date*counted',
                (date, counted) => ({
                  name: date,
                  value: counted,
                }),
              ]}
            />
          </Chart>
        </Card>
        <Card
          style={{
            marginTop: 24,
          }}
        >
          <Chart
            height={300}
            // data={data[0].emotionPercent}
            // data={
            //   data.filter(({ date }) => {
            //     return date === ds.state.currentState;
            //   })[0].emotionPercent
            // }
            data={dvPercent}
            forceFit
          >
            <Axis name="category" />
            <Axis name="value" visible={false} />
            <Tooltip
              crosshairs={{
                type: 'y',
              }}
              showTitle={false}
            />
            <Geom
              type="interval"
              position="category*value"
              tooltip={[
                'category*value',
                (category, value) => ({
                  // 自定义 tooltip 上显示的 title 显示内容等。
                  name: category,
                  value: `${value * 100}%`,
                }),
              ]}
            >
              <Label content={['category*value', (category, value) => `${value * 100}%`]} />
            </Geom>
          </Chart>
        </Card>
      </div>
    );
  }
}

export default ChartLinkage;


// // DataSet对象：数据集对象，一组数据集合.
// // DataView对象：单个数据视图对象，例如普通二维数据、树形数据、图数据等等.

// // step1 创建DataSet对象，指定状态量.
// const ds = new DataSet({
//   state: {
//     year: '2010'
//   }
// });

// // step2 创建DataView对象，在transform中使用状态量.
// const dv = ds.createView().source(data);
// dv.transform({
//   type: 'filter',
//   callback(row) {
//     return row.year === ds.state.year;
//   }
// });

// // step3 在图表中使用DataView.
// <Chart data={dv}>
// </Chart>

// // step4 更新状态量时，DataView也会更新.
// ds.setState('year', '2012');